<!-- 高压基础数据维护 -->
<template>
  <div class="layout-container">
    <el-container class="layout-container">
      <el-main style="padding:10px;">
        <div class="search-container">
          <div>
            <span class="search-font">用户编码/名称:</span><el-input v-model="listQuery.yhbmmc" size="mini" style="width:150px"></el-input>&nbsp;&nbsp;
            <span class="search-font">注册日期:</span><el-date-picker type="date" v-model="listQuery.qszcrq" size="mini" value-format="yyyy-MM-dd" style="width:130px"></el-date-picker>
            <span class="search-font">至</span><el-date-picker type="date" v-model="listQuery.zzzcrq" size="mini" value-format="yyyy-MM-dd" style="width:130px"></el-date-picker>&nbsp;&nbsp;
            <span class="search-font">投运状态:</span>
            <el-select v-model="listQuery.tyzt" size="mini" style="width:100px">
              <el-option
                v-for="item in tyztCombo"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="toSearch()" style="margin-left:10px">查询</el-button>
            <el-button size="small" type="primary" icon="el-icon-refresh" @click="toReset()">重置</el-button>
          </div>
          <div style="padding-top: 10px">
            <span class="search-font">当前单位:</span><el-input v-model="dwmcCx" size="mini" style="width:200px" disabled></el-input>&nbsp;&nbsp;
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd()">新增</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="toBg()">用户变更</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="toTy()">用户退役</el-button>
            <span style="float: right">
              <el-button
                type="primary"
                icon="el-icon-setting"
                size="mini"
                class="columnBtn"
                @click="cccEvent('show', cccTable)"
              >配置列</el-button>
              <el-button class="exportBtn" type="primary"  size="mini" @click="cccEvent('export', cccTable)">导 出</el-button>
            </span>
          </div>
        </div>

        <div class="table-container">
          <el-table
            ref="multipleTable"
            size="medium"
            :data="dataList"
            v-loading="listLoading"
            height="100%"
            border
            highlight-current-row
            @selection-change="handleSelectionChange"
            :row-style="rowStyle"
          >
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" align="center" fixed="left" label="序号" width="50"></el-table-column>
            <template v-for="col in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="col.id"
                :prop="col.field"
                :label="col.title"
                :min-width="col.minWidth"
                :align="col.align"
                :header-align="col.align"
                :sortable="col.sortable"
                :formatter="col.formatter"
                :fixed="col.fixed"
              ></el-table-column>
            </template>
            <el-table-column align="center" fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="primary" @click="toEdit(scope.row)"></el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click="toDel(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.current"
            :page-size="listQuery.size"
            :page-sizes="[10, 20, 40, 80]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>

    <!--引用其他组件-->
    <zcgyyhAdd ref="zcgyyhAdd" :addData="addData"></zcgyyhAdd> <!--用户新增-->
    <zcgyyhEdit ref="zcgyyhEdit" :editData="editData"></zcgyyhEdit>  <!--用户修改-->
    <zcgyyhBg ref="zcgyyhBg" :bgData="bgData"></zcgyyhBg>  <!--用户变更-->
    <zcgyyhTy ref="zcgyyhTy" :rowData="tyData"></zcgyyhTy>  <!--用户退役-->
    <ccc ref="ccc"></ccc><!-- 配置列 -->

  </div>
</template>

<script>
import { getZcgyyhsjTable } from "@/api/sjwh/zcgy";
import { getDictCombo } from "@/api/tools/dict";
import zcgyyhAdd from "./modules/zcgyyhAdd";
import zcgyyhEdit from "./modules/zcgyyhEdit";
import zcgyyhBg from "./modules/zcgyyhBg";
import zcgyyhTy from "./modules/zcgyyhTy";
import { deleteZcgyyhsj } from "@/api/sjwh/zcgy";
import { dataModulePrefix } from '../../../config'
import ccc from "@/dialogCommom/ccc";

export default {
  name: "zcgyyh",
  components: {
    zcgyyhAdd: zcgyyhAdd,
    zcgyyhEdit: zcgyyhEdit,
    zcgyyhBg: zcgyyhBg,
    zcgyyhTy: zcgyyhTy,
    ccc: ccc,
  },
  data() {
    return {
      listLoading: false,
      total: 0,
      listQuery: {  //查询条件字段
        dwbm: '',
        yhbmmc: '',
        qszcrq: '',
        zzzcrq: '',
        tyzt: '1',
        current: 1,
        size: 10
      },
      dwmcCx: '',
      dataList: [],
      multipleSelection: [], //勾选的所有行数据
      cccTable: "zc_gyyhsj", //列配置表名
      columnData: [], //列配置,
      tyztCombo: [],
      treeNode: {}, // 导航页参数
      addData: {
        show: false,
        dwbm: '',
        dwmc: '',
        dwxz: '',
        dwxzm: ''
      },
      editData: {
        show: false,
        id: ''
      },
      bgData: {
        show: false,
        id: ''
      },
      tyData: {},
    }
  },

  created() {
    this.treeNode = JSON.parse(sessionStorage.getItem('treeNode')) // 获取导航页参数
    this.dwmcCx = this.treeNode['dwmc'];
    this.listQuery.dwbm = this.treeNode['dwbm'];
    this.getList();
    this.getTyztCombo();
  },

  mounted() {
    this.cccEvent("load", this.cccTable);
  },

  beforeUpdate() {
    //解决列配置引发的滚动条问题
    this.$nextTick(() => {
      this.$refs['multipleTable'].doLayout();
    });
  },

  methods: {
    // 选择table数据列
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toSearch(){
      this.getList();
    },
    toReset(){
      this.listQuery.yhbmmc = '';
      this.listQuery.tyzt = '1';
      this.listQuery.qszcrq = '';
      this.listQuery.zzzcrq = '';
      this.getList();
    },
    toAdd(){
      const that = this
      let propAddData = {
        show: true,
        dwbm: that.treeNode.dwbm,
        dwmc: that.treeNode.dwmc,
        dwxz: that.treeNode.dwxz,
        dwxzm: that.treeNode.dwxzm
      }
      that.addData = propAddData
    },
    toEdit(row){
      if(row.zxrq != null || row.tcrq != null){
        this.$message.warning("已注销数据不能修改！");
        return;
      }
      const that = this
      let propEditData = {
        show: true,
        id: row.id,
      }
      that.editData = propEditData
    },
    toDel(row){
      this.$confirm(
        '此操作将永久删除数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let deleteObj = {
          czy: row.czy,
          ids: [row.id]
        }
        deleteZcgyyhsj(deleteObj).then(res => {
          if (res.code == 0) {
            this.$message.success( "删除成功！");
            this.getList();
          } else {
            this.$message.error("删除失败！");
          }
        });
      });
    },
    getList(){
      getZcgyyhsjTable(this.listQuery).then(response => {
        this.dataList = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      })
    },
    handleSizeChange(val){
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.current = val;
      this.getList();
    },
    refresh(){
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.getList();
      this.multipleSelection = [];
    },
    getTyztCombo() {
      getDictCombo({"typeCode":"dict_tyzt"}).then(response => {
        this.tyztCombo = response.data;
        this.tyztCombo.unshift({'text': '全部', 'value': '0'});
      });
    },
    // 用户变更
    toBg(){
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请勾选一条数据进行操作')
        return false
      }
      if (this.multipleSelection.length > 1) {
        this.$message.warning('只能勾选一条数据进行操作')
        return false
      }
      let rowData = this.multipleSelection[0];
      if(rowData.zxrq != null || rowData.tcrq != null){
        this.$message.warning("已注销数据不能变更！");
        return;
      }
      let propBgData = {
        show: true,
        id: rowData.id,
      }
      this.bgData = propBgData
    },
    // 用户退役
    toTy(){
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请勾选一条数据进行操作')
        return false
      }
      if (this.multipleSelection.length > 1) {
        this.$message.warning('只能勾选一条数据进行操作')
        return false
      }
      let rowData = this.multipleSelection[0];
      if(rowData.zxrq != null || rowData.tcrq != null){
        this.$message.warning("已注销数据不能再退役！");
        return;
      }
      this.tyData = rowData;
      this.$nextTick(() => {
        this.$refs['zcgyyhTy'].open();  // 调用子页面方法
      })
    },
    /**
     * 配置列
     */
    cccEvent(method, table) {
      if (method === "show") {
        this.$refs.ccc.show(table);
      } else if (method === "load") {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table));
          });
        }).then(response => {
          this.columnData = response;
        });
      } else if (method === "export") {
        let vo = {
          tableCode: table,
          param: this.listQuery,
          url: `${dataModulePrefix}/zc-gyyhsj/page`,
          method: "POST",
          fileName: "高压用户数据",
          total: this.total
        };
        this.$refs.ccc.exportExcel(vo);
      }
    },
    /**
     * 行字体颜色设置
     * row为某一行的除操作外的全部数据
     * rowIndex为某一行（从0开始数起）
     */
    rowStyle ({ row, rowIndex}) {
      let stylejson={}
      if (row.zxrq != null || row.tcrq != null) {
        stylejson.color = 'red';
        return stylejson
      }
    },
  }
};
</script>
<style scoped lang='scss'>
  .layout-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .search-container {
    width: 100%;
    overflow: hidden;
    padding-right: 0;
  }
  .table-container {
    width: 100%;
    height: calc(90% - 50px);
  }
  .pagination-container{
    text-align: center;
  }
  .search-font{
    font-size: 15px;
    font-weight: 600;
    color: gray;
    padding-right: 10px;
  }
</style>
